<template>
    <div>
        <el-card class="box-card">
            <mytitle :showLine="true">认养信息</mytitle>
            <div class="item-box">
                <div class="items items1"><span class="item-title ">认养编号：</span><span class="item-msg tenancyId">{{showMsg.tenancyId}}</span></div>
                <div class="items"><span class="item-title">认养时间：</span><span class="item-msg">{{showMsg.fosterTime}}</span></div>
                <div class="items"><span class="item-title">到期时间：</span><span class="item-msg">{{showMsg.fosterExpireTime}}</span></div>
                <div class="items"><span class="item-title">认养人/联系方式：</span><span class="item-msg">{{showMsg.fosterName}}/{{ showMsg.fosterPhone }}</span></div>
                <div class="items"><span class="item-title">地块总面积：</span><span class="item-msg">{{ showMsg.tenancyLandArea }}</span></div>
                <div class="items"><span class="item-title">地块数量：</span><span class="item-msg">{{ showMsg.tenancyNum }}</span></div>
                <div class="items"><span class="item-title">租地时间：</span><span class="item-msg">{{ showMsg.tenancyDuration }}</span></div>
                <div class="items"><span class="item-title">认养租金：</span><span class="item-msg">{{ showMsg.rent }}</span></div>
            </div>
        </el-card>
        <el-tabs type="border-card" @tab-click="changeLand" v-model="landInfo.landId">
            <el-tab-pane v-for="item in  landData" :key="item.landId"  :label="item.landName" :name="item.landId"></el-tab-pane>
            <div class="item-box">
                <div class="items"><span class="item-title">地块名称：</span><span class="item-msg">{{ landMsg.landName }}</span></div>
                <div class="items"><span class="item-title">地块面积：</span><span class="item-msg">{{ landMsg.landArea }}</span></div>
                <!-- 地块状态(0 待种植 1 待采收 2 已采收) -->
                <div class="items"><span class="item-title">地块状态：</span><span class="item-msg">{{ landMsg.landState?'待种植':landMsg.landState==1?'待采收':'已采收' }}</span></div>    
                <div class="items"><span class="item-title">种植品种：</span>
                    <span class="item-msg">
                    <!-- {{ JSON.parse(landMsg.variety).join()}} -->
                      <el-tag type="warning" style="margin-right:5px;" v-for="item in landMsg.variety" :key="item">{{item}}</el-tag>
                    </span>
                </div>
                <div class="items"><span class="item-title">剩余种植面积：</span><span class="item-msg">{{ landMsg.notPlantArea }}</span></div>    
            </div>
                 <mytitle :showLine="false">种植信息</mytitle>
                <el-table ref="singleTable" 
                :header-cell-style="{color: '#292B2B', background: '#EAF9F4'}" 
                :data="tableData" 
                highlight-current-row 
                @current-change="handleCurrentChange" 
                border
                style="width: 100%">
                <el-table-column prop="variety" label="品名" align="center">
                </el-table-column>
                <el-table-column prop="plantArea" label="种植面积" align="center">
                </el-table-column>
                <el-table-column align="center" label="操作">
                    <template slot-scope="scope">
                        <el-button @click="checkRow(scope.row)" type="text" >农事任务</el-button>
                        <!-- <el-button @click="toPost(scope.row)" type="text" >发货</el-button> -->
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog
                title="农事任务"
                :visible.sync="dialogVisible"
                width="30%">
                <el-timeline style="width: 100%;margin: 20px 0;">
                <el-timeline-item v-for="(item,index) in staffData" :timestamp="item.finishTime" :key="index" placement="top" color="#17CC77"  >
                  <div class="timestamp-item">
                    <h4>{{item.taskMsg}}</h4>
                  </div>
                </el-timeline-item>
                </el-timeline>
            </el-dialog>
            
        </el-tabs>
        
    </div>
</template>
<script>
import {  findTenancyByTenancyIdAndLandId,findTaskMsgSByLandMsgId } from '../util/api.js'
export default {
    data() {
        return {
            currentRow:null,
            dialogVisible:false,
            landData:[],//地块总类
            showMsg:{},//认养信息
            landMsg:{},//地块信息
            landInfo: {
                landId: "",
                tenancyId: ""
            },//地块请求参数
            staffData:[],//农事信息
            tableData: [],//种植品种信息
            showItem:{},//邮寄的品种

        }
    },
    mounted(){ 
         this.showMsg = JSON.parse(decodeURIComponent(this.$route.query.data))
        //  console.log(this.showMsg)
         this.landData = JSON.parse(JSON.stringify(this.showMsg.landS))
         this.landInfo.landId = this.landData[0].landId
         this.landInfo.tenancyId = this.showMsg.tenancyId
        //  console.log(this.showMsg)
        //  //获取地块信息
         this.getItem()
    },
    methods: {
        async getItem(){
             let res = await findTenancyByTenancyIdAndLandId(this.landInfo)
            //  console.log(res)
             if(res.code!=200)return this.landMsg = {}
             this.landMsg = res.data
             this.landMsg.variety=JSON.parse(res.data.variety)
             this.tableData = res.data.landDetails
        },
        handleCurrentChange(val) {
            this.currentRow = val;
        },
        //地块切换
        changeLand(){
                 this.getItem()
        },
        //邮寄1
        toPost(row) {
           this.showItem = row;
           this.dialogVisible = true
        },
        // 查看
       async checkRow(row) {
               let res = await findTaskMsgSByLandMsgId({landMsgId:row.landMsgId})
            //    console.log(res)
               if(res.code!=200)return this.staffData = []
               this.staffData = res.data
               this.dialogVisible = !this.dialogVisible
        },
    }
}
</script>
<style lang="less" scoped>
.box-card {
    width: 100%;
    margin: 14px 0;
}
.item-box{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding-top: 20px;
    .items{
        display: flex;
        align-items: center;
        margin-right: 70px;
        margin-bottom: 40px;
        .item-title{
             min-width: 220px;
             text-align: right;
             margin-right: 10px;
        }
        .item-msg{
            min-width: 220px;
            height: 30px;
            line-height: 30px;
            background-color: #E9E9E9;
            padding-left: 10px;
            padding-right: 5px;
        }
        .tenancyId{
            min-width: 220px;
            padding-right: 10px;
        }
    }
    .items1{
        margin-right: 10px;
    }
}
.timestamp-item{
    width: 400px;
    padding: 20px;
    background-color: #F3F5F4;
    border-radius: 5px
}
.el-tabs--border-card{
    box-shadow: 0 2px 12px 0 rgba(0,0,0,.1)!important;
    border: 1px solid #EBEEF5!important;
}
/deep/.el-tabs__item.is-active{
    color: #52B484!important;
}
/deep/.el-tabs__item:hover {
    color: #52B484!important;
    cursor: pointer;
}
/deep/.el-tabs__item{
    color: #3A3D3D!important;
}
</style>